<template>
  <div class="nav-container">
    <svg class="nav-svg" viewBox="0 0 1200 100" xmlns="http://www.w3.org/2000/svg">
      <!-- 背景渐变 -->
      <defs>
        <linearGradient id="navGradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:#1e3a8a;stop-opacity:0.8" />
          <stop offset="50%" style="stop-color:#3b82f6;stop-opacity:0.9" />
          <stop offset="100%" style="stop-color:#1e3a8a;stop-opacity:0.8" />
        </linearGradient>
        
        <linearGradient id="waveGradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:#00d4ff;stop-opacity:0.3" />
          <stop offset="50%" style="stop-color:#00d4ff;stop-opacity:0.6" />
          <stop offset="100%" style="stop-color:#00d4ff;stop-opacity:0.3" />
        </linearGradient>
      </defs>
      
      <!-- 主背景 -->
      <rect width="100%" height="100" fill="url(#navGradient)" />
      
      <!-- 波浪装饰 -->
      <path d="M0,60 Q300,40 600,60 T1200,60 L1200,100 L0,100 Z" fill="url(#waveGradient)" />
      
      <!-- 导航按钮 -->
      <g class="nav-buttons">
        <g 
          v-for="(item, index) in navItems" 
          :key="index"
          :class="['nav-button', { active: activeIndex === index }]"
          @click="setActive(index)"
          :transform="`translate(${120 + index * 200}, 25)`"
        >
          <!-- 按钮背景 -->
          <rect 
            width="160" 
            height="50" 
            rx="25" 
            :fill="activeIndex === index ? 'url(#activeButtonGradient)' : 'rgba(255,255,255,0.1)'"
            :stroke="activeIndex === index ? '#00d4ff' : 'rgba(255,255,255,0.3)'"
            stroke-width="1"
            class="button-bg"
          />
          
          <!-- 按钮文字 -->
          <text 
            x="80" 
            y="32" 
            text-anchor="middle" 
            :fill="activeIndex === index ? '#fff' : '#8c9eff'"
            font-size="14" 
            font-weight="600"
            class="button-text"
          >
            {{ item }}
          </text>
          
          <!-- 活跃状态光效 -->
          <circle 
            v-if="activeIndex === index"
            cx="80" 
            cy="25" 
            r="25" 
            fill="none" 
            stroke="#00d4ff" 
            stroke-width="1" 
            opacity="0.5"
            class="glow-circle"
          />
        </g>
      </g>
      
      <!-- 动态光点 -->
      <circle class="light-spot" cx="0" cy="30" r="3" fill="#00d4ff" opacity="0.8">
        <animateMotion dur="8s" repeatCount="indefinite">
          <path d="M0,30 Q300,10 600,30 T1200,30" />
        </animateMotion>
      </circle>
      
      <!-- 渐变定义 -->
      <defs>
        <linearGradient id="activeButtonGradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:#00d4ff;stop-opacity:0.8" />
          <stop offset="50%" style="stop-color:#0099cc;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#00d4ff;stop-opacity:0.8" />
        </linearGradient>
      </defs>
    </svg>
    
    <!-- 底部描述文字 -->
    <div class="nav-description">
      <p>共享出行智能监控平台 - 实时监控车辆状态、站点运营、用户出行数据</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeIndex = ref(0)

const navItems = [
  '总览',
  '出行站',
  '服务中心', 
  '维修点',
  '统计'
]

const setActive = (index: number) => {
  activeIndex.value = index
}
</script>

<style scoped lang="less">
.nav-container {
  width: 100%;
  position: relative;
  margin-bottom: 20px;
}

.nav-svg {
  width: 100%;
  height: 100px;
  cursor: pointer;
}

.nav-button {
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    .button-bg {
      fill: rgba(0, 212, 255, 0.2);
      stroke: #00d4ff;
    }
    
    .button-text {
      fill: #00d4ff;
    }
  }
  
  &.active {
    .button-bg {
      filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
    }
    
    .button-text {
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    }
  }
}

.glow-circle {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

.light-spot {
  filter: drop-shadow(0 0 6px #00d4ff);
}

.nav-description {
  text-align: center;
  margin-top: 10px;
  
  p {
    color: #8c9eff;
    font-size: 12px;
    margin: 0;
    opacity: 0.8;
  }
}
</style>